{% extends "base.html" %}

{% block css %}
#tasks{
    margin:5%;
}

table {
    width: 100%;
}

table tr {
    line-height: 40px;
    border: none;
    text-align: center;
}

tbody > tr:nth-child(even) {
    background-color: #ccc;
}
tbody > tr:nth-child(odd) {
    background-color: rgb(187, 182, 182);
}
thead {
    background-color:#0080FF;
}
#pagination {
    text-align: center;
    margin-top: 50px;
    margin-bottom:80px;
}
#pagination a {
    text-decoration: none;
    border: 1px solid #f9d52b;
    padding:5px 7px;
    color:#767675;
    width:50px;
    cursor:pointer;
}
#pagination a:hover {color:red}
{% endblock %}

{% block title %}
<title>task</title>
{% endblock %}

{% block content %}
<script>
     // job状态检查函数
     function checkStatus(tr_sel){
        var check_url = tr_sel.children("td.job_status").attr("checkurl");
        $.get(check_url, function(data, status){
            var status_code = data.status_code;
            tr_sel.children("td.job_status").text(data.status);
            tr_sel.children("td.job_status").attr("status", status_code);
            //其他按钮的初始化
            if (status_code=="1"){
                tr_sel.find("td.add_job > button").attr("disabled", true);
                tr_sel.find("td.remove_job > button").attr("disabled", true);
                tr_sel.find("td.start_job > button").attr("disabled", true);
                tr_sel.find("td.pause_job > button").attr("disabled", false);
            } else if (status_code=="0"){
                tr_sel.find("td.add_job > button").attr("disabled", true);
                tr_sel.find("td.remove_job > button").attr("disabled", false);
                tr_sel.find("td.start_job > button").attr("disabled", false);
                tr_sel.find("td.pause_job > button").attr("disabled", true);   
            } else if (status_code=="-1"){
                tr_sel.find("td.add_job > button").attr("disabled", false);
                tr_sel.find("td.remove_job > button").attr("disabled", true);
                tr_sel.find("td.start_job > button").attr("disabled", true);   
                tr_sel.find("td.pause_job > button").attr("disabled", true);    
            }
        });
    };

    //加载页面时检查job状态
    $(document).ready(function(){
        $("tr[id^=row_]").each(function(){
            var check_url =$(this).children("td.job_status").attr("checkurl");
            var cur_sel=$(this);
            var is_timing = $(this).children("td.task_type").attr("is-timing");
            //对定时任务和非定时任务区别显示
            if (is_timing=="False") {
                cur_sel.find("td.add_job > button").attr("disabled", true);
                cur_sel.find("td.remove_job > button").attr("disabled", true);
                cur_sel.find("td.start_job > button").attr("disabled", true);   
                cur_sel.find("td.pause_job > button").attr("disabled", true);
                cur_sel.find("td.run_once > button").attr("disabled", false);
                cur_sel.find("td.period").text("-");
                cur_sel.children("td.job_status").text("ready..");
            } else {
                checkStatus(cur_sel);
            }
        });
    });

    //点击按钮后的状态变化
    $(document).ready(function(){
        //启动任务
        $("tr > td.start_job > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                checkStatus(tr_sel);
            });
        });
        //暂停任务
        $("tr > td.pause_job > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                checkStatus(tr_sel);
            });
        });
        //添加任务
        $("tr > td.add_job > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                checkStatus(tr_sel);
            });
        }); 
        //移除任务
        $("tr > td.remove_job > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                checkStatus(tr_sel);
            });
        });
        //运行任务一次
        $("tr > td.run_once > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                tr_sel.children("td.job_status").text(data.status);
            }) ;
        }); 

    });

</script>

<div id="tasks">
    <table border="0" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>taskId</th>
                <th>taskName</th>
                <th>IsTiming</th>
                <th>Period</th>
                <th>Status</th>
                <th>Project</th>
                <th>Spider</th>
                <th colspan='4'>定时</th>
                <th>一次</th>
            </tr>
        </thead>
        <tbody>
            {% for task in tasks %}
            <tr class="row" id="row_{{ task.task_id }}">
                <td>{{ task.task_id }}</td>
                <td><a href="{% url 'update_task' tid=task.task_id %}">{{ task.task_name }}</a></td>
                <td class="task_type" is-timing={{ task.is_timing }}>{{ task.is_timing }}</td>
                <td class="period">{{ task.every }}  {{ task.period }}</td>
                <td class="job_status" status="" checkurl="{% url 'check_job' tid=task.task_id %}"></td>
                <td >{{ task.spider.project_name }}</td>
                <td ><a href="{% url 'spider_detail' sid=task.spider.id %}">{{ task.spider.spider_name }}</a></td>
                <td class="add_job" relate-url="{% url 'add_job' tid=task.task_id %}"><button>添加</button></td>
                <td class="remove_job" relate-url="{% url 'remove_job' tid=task.task_id %}"><button>移除</button></td>
                <td class="start_job" relate-url="{% url 'resume_job' tid=task.task_id %}"><button>启动</button></td>
                <td class="pause_job"  relate-url="{% url 'pause_job' tid=task.task_id %}"><button>暂停</button></td>
                <td class="run_once" relate-url="{% url 'run_once_job' tid=task.task_id %}"><button>运行</button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- 翻页 -->
<div id="pagination">
    {% if cur_page > 1 %}
        <a href="{% url 'tasks' %}?size={{ size }}&page={{ cur_page|add:-1 }}">上一页</a>
    {% else %}
        <span>上一页</span>
    {% endif %}
    &nbsp;&nbsp;
    {% for pg in pages %}
    <a href="{% url 'tasks' %}?size={{ size }}&page={{ forloop.counter }}">{{forloop.counter}}</a>
    {% if forloop.last %}
        {% if forloop.counter > cur_page %}
        <span>...</span>
        &nbsp;&nbsp;
        <a href="{% url 'tasks' %}?size={{ size }}&page={{ cur_page|add:1 }}">下一页</a>
        {% else %}
        &nbsp;&nbsp;
        <span>下一页</span>
        {% endif %}
        &nbsp;&nbsp;
        <span>共 {{ cur_page }}/{{ forloop.counter }} 页</span>
    {% endif %}
    {% endfor %}    
</div>
{% endblock %}

